<template>
  <div class="lix-sch">
    <div class="lix-sch__header" v-if="schoolInfo !== null">
      <div class="imgs">
        <img :src="schoolInfo.cover" alt="">
      </div>
      <p class="title">{{ schoolInfo.name }}</p>
      <p class="desc">{{ schoolInfo.region }}{{ schoolInfo.address_detail }}</p>
      <van-rate class="rate" v-model="schoolInfo.grade" :size="13" disabled disabled-color="#ff6c60"/>
      <div class="follow">
        <button @click="follow" v-if="!isFollowed">+ 关注</button>
        <button @click="follow" v-else class="is-followed">已关注</button>
      </div>
    </div>
    <div class="lix-sch__content">
      <van-tabs :line-width="18">
        <van-tab v-for="item in tabTitle" :key="item.id">
          <div slot="title">
            {{ item.title }}
          </div>
          <div v-if="item.id === 0" class="tabFirst" >
            <div class="lix-sch__firsttab" v-html="schoolInfo.description" v-if="schoolInfo !== null"></div>
            <div class="lix-sch__fixheight"></div>
            <div class="tab-btn">
              <button>
                <div>
                  <img src="../../assets/call.png" alt="" class="button-img">
                  <a :href="tel">客服热线</a>
                </div>
              </button>
            </div>
          </div>
          <div v-else>
            <!-- 常规列表 -->
            <div class="lix-cate__list">
              <van-list
                v-model="loading"
                :finished="isFinished"
                @load="getSchoolClassList"
              >
                <div class="lix-cate__item" v-for="(item, idx) in list" :key="idx" @click="itemClick(item.id)">
                  <img :src="item.thumb" />
                  <div class="info">
                    <p class="title van-ellipsis">{{ item.name }}</p>
                    <p class="author">主讲师：{{ item.teacher }}</p>
                    <p class="author">开课时间：{{ item.begintime }}</p>
                    <p class="price"><span>￥</span>{{ item.price }}</p>
                  </div>
                </div>
              </van-list>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Rate, Tab, Tabs, List } from 'vant'
Vue.use(Tab)
  .use(Tabs)
  .use(Rate)
  .use(List)
export default {
  name: 'school',
  components: {},
  data () {
    return {
      tabTitle: [{ id: 0, title: '学校简介' }, { id: 1, title: '精品课程' }],
      value: 3,
      schoolInfo: null,
      loading: true,
      isFinished: false,
      list: [],
      meta: null,
      tel: '',
      isFollowed: false
    }
  },
  created () {
    console.log(this.axios)
    const schoolId = this.$route.params.id
    console.log(schoolId)
    this.getSchoolInfo(schoolId)
    this.getSchoolClassList()
  },
  methods: {
    getSchoolInfo (id) {
      this.axios
        .get('/school/' + id, {
          headers: { FastMode: true }
        })
        .then(res => {
          this.schoolInfo = res.data
          this.tel = 'tel:' + res.data.telephone
          this.isFollowed = res.data.followed
          console.log(this.schoolInfo)
        })
        .catch(e => {
          console.log(e)
        })
    },
    getSchoolClassList () {
      const schoolId = this.$route.params.id
      this.axios
        .get('/school/course', {
          headers: { FaseMode: true },
          params: { id: schoolId }
        })
        .then(res => {
          console.log(res)
          let data = res.data
          let itemCount = data.items.length
          if (itemCount > 0) {
            this.list = this.list.concat(data.items)
          }
          this.meta = data.meta
          this.loading = false
          if (this.meta.pageCount <= this.meta.currentPage || itemCount <= 0) {
            this.isFinished = true
          }
        })
        .catch(e => {
          console.log(e)
        })
    },
    follow () {
      const schoolId = this.$route.params.id
      this.axios
        .post('/follow/attention', {
          model: 'school',
          model_id: schoolId
        })
        .then(res => {
          this.isFollowed = res.data
          console.log(res)
        })
        .catch(e => {
          console.log(e)
        })
    },
    itemClick (id) {
      const url =
        window.location.protocol +
        '//' +
        window.location.host +
        '/#/course/' +
        id
      console.log(url)
      this.pushWeblink(url)
    }
  }
}
</script>

<style lang="less">
p {
  margin: 0;
  padding: 0;
}
.lix-sch {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  background-color: #fff;
  min-height: 100%;

  & .lix-sch__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
    border-bottom: 10px solid #f5f5f5;

    img {
      width: 181px;
      height: 105px;
      border-radius: 5px;
    }

    & .title {
      margin-top: 20px;
      font-size: 18px;
      color: #333333;
      font-weight: 900;
    }

    & .desc {
      margin-top: 12px;
      font-size: 12px;
      color: #6d6d6d;
    }

    & .rate {
      height: 13px;
      margin-top: 10px;
    }

    & .follow {
      & button {
        margin-top: 10px;
        width: 63px;
        height: 25px;
        border-radius: 13px;
        border: 1px solid #ff6046;
        background-color: #fff;
        color: #ff6046;
        .is-followed {
          border: 1px solid #d3d3d3;
          background-color: #fff;
          color: #d3d3d3;
        }
      }
      & button.is-followed {
        border: 1px solid #d3d3d3;
        background-color: #fff;
        color: #d3d3d3;
      }
      padding-bottom: 10px;
    }
  }

  & .lix-sch__content {
    .tabFirst {
      margin: 20px 10px 0 10px;
      // margin-top: 20px;

      & button {
        width: 356px;
        height: 40px;
        background-color: #f8b551;
        color: #fff;
        border-radius: 20px;
        border: none;
      }

      & button > div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      & .button-img {
        height: 27px;
        width: 27px;
      }

      & .tab-btn {
        position: fixed;
        bottom: 10px;
        left: 10px;
        & > button > div > a {
          color: white;
        }
      }
    }
  }
  .lix-cate__item {
    display: flex;
    padding: 15px 35px 15px 10px;
    border-bottom: 1px solid #efefef;
  }
  .lix-cate__item > img {
    flex: 0 0 43%;
    width: 142px;
    height: 82px;
  }
  .lix-cate__item .info {
    flex: 0 0 57%;
    max-width: 200px;
    margin-left: 10px;
  }
  .lix-cate__item .info .title {
    font-size: 16px;
    color: #292929;
  }
  .lix-cate__item .info .author {
    margin-top: 2px;
    font-size: 12px;
    color: #939393;
  }
  .lix-cate__item .info .price {
    margin-top: 6px;
    font-size: 14px;
    color: #ff0036;
  }
  .lix-cate__item .info .price ._span {
    font-size: 10px;
  }
  .lix-sch__fixheight {
    width: 100%;
    height: 50px;
    background: #fff;
  }
}
</style>
